マークダウン文書に対する Prettier の自動フォーマットを範囲指定で無効にする

若槻龍太

2023.09.22

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX 事業本部 Delivery 部の若槻です。

VS Code でのマークダウン文書の編集で Prettier を使いたく、言語ごとの設定を有効化したら、特定の記述だけ自動フォーマットを無効化する必要性が生じたので、方法を調べてみました。

はじめに結論

次のように Prettier のチェックを無効化したい範囲を  と  のタグで囲むことで、範囲指定で Prettier のフォーマットを無効化できます。

<!-- prettier-ignore-start -->
フォーマットを無効化したい記述1
フォーマットを無効化したい記述2
フォーマットを無効化したい記述3
<!-- prettier-ignore-end -->

DevelopersIO の記事執筆を効率化する際の事情で、 VS Code 上で記事を編集する際にコードスニペットをバッククォートと[]で二重に囲むということをしています。

しかしマークダウンで Prettier の自動フォーマットを有効化すると、バッククォートの前後の行に空行が挿入されてしまいます。これを無効化したいです。

Prettier で特定の文字種の前後でのみフォーマットを無効化する設定は無いようでしたので、範囲指定での無効化タグを使うことにしました。

ちなみに無効化タグは消さずに記事を公開しても、公開画面ではちゃんと非表示となっています。

以下に設定内容を書き残しておきますが、特に特別なことはしていません。Prettier の設定は特定プロジェクトでのみ有効化するようにしました。

Prettier を npm でインストールします。

npm install --save-dev --save-exact prettier

まだの場合は VS Code に Prettier の拡張機能をインストールします。これでファイル保存時の自動フォーマットを使用できるようになります。

code --install-extension esbenp.prettier-vscode

プロジェクト内に次のファイルを作成し、ファイル保存時の自動フォーマットをマークダウン形式のファイルに対して有効化します。

{
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
  }
}

前述の背景の通り、コードスニペットを二重にしているため、記述が若干冗長となります。そこで下記ブログで紹介しているような BetterTouchTool でのショートカット設定を行い、コードスニペットの記述を効率化していました。

そして今回無効化タグを使うようにするにあたり、タグの追加も BetterTouchTool のショートカットで対応するうようにしました。修正後のスクリプトは次のようになります。

async (lang) => {
   return `<!-- prettier-ignore-start -->\n[${lang}]\n\`\`\`${lang}\n\n\`\`\`\n[/${lang}]\n<!-- prettier-ignore-end -->`
}

以上